<template>
	<view>
		<u-navbar title="消息" bgColor="#F3F4F6" :titleStyle="{'color':'#000000','font-size':'18px','font-weight':'500'}"
			:fixed="true">
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-left" slot="left">
				<image @click.top="back" class="back" src="https://oss.jxhecong.com/v2/image/back@2x.png"></image>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="u-left" slot="left">
			</view>
			<!-- #endif -->
		</u-navbar>
		<loading-page :loading="loading"></loading-page>
		<view v-if="!loading">
			<view class="content" v-if="!showEmpty">
				<mescroll-body ref="mescrollRef" :top="listTop" :down="downOption" :up="upOption" :bottom="listBottom"
					@init="mescrollInit" @down="downCallback" @up="upCallback">
					<block v-for="(item,index) in messageList" :key="index">
						<service-message-cell :message="item"></service-message-cell>
					</block>
				</mescroll-body>
			</view>
			<u-empty :show="showEmpty" :marginTop="emptyTop">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import * as messageApi from '../../api/user/home.js'
	import loadingPage from './@/components/loadingPage.vue'
	import serviceMessageCell from '../components/serviceMessageCell.vue'
	import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import mescrollBody from "@/components/mescroll-uni/components/mescroll-body/mescroll-body.vue"
	import {paging} from '@/mixins/paging.js'
	export default {
		components: {
			serviceMessageCell,
			mescrollBody,
			loadingPage
		},
		mixins: [MescrollMixin,paging],
		data() {
			return {
				loading:true,
				listTop: 0,
				listBottom: 0,
				tabIndex: 0,
				messageList: []
			}
		},
		onLoad() {
			// #ifdef APP-PLUS || APP-PLUS-NVUE
			plus.navigator.setStatusBarStyle('dark');
			// #endif
			this.getMessageList()
		},
		methods: {
			upCallback(page) {
				// this.mescroll.resetUpScroll()
				this.query.pageNum = page.num
				this.getMessageList()
			},
			getMessageList() {
				messageApi.getMessageInfo(this.tabIndex, this.query.pageNum).then((res) => {
					this.loading=false;
					if (res.code == 0) {
						this.messageList = res.data.records
						this.mescroll.endSuccess(res.data.records.length, res.data.records.length<10?false:true)
						if (this.query.pageNum === 1) {
							this.dataList = []
						}
						// 添加数据
						this.messageList = this.messageList.concat(res.data.records)
						this.showEmpty=this.messageList.length==0?true:false
					}
				}).catch((errMsg) => {
					this.loading=false;
					this.mescroll.endErr();
				})
			},

			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-left {
		.back {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.u-center {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.tab-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 30rpx;
		height: 70rpx;
	}

	.tab-item:last-child {
		margin-right: 0rpx;
	}

	.tab-line {
		width: 42rpx;
		height: 12rpx;
		margin-top: 6rpx;
	}

	.tab-title {
		color: #303133;
		font-size: 36rpx;
		font-weight: 500;
		width: 180rpx;
		text-align: center;
	}

	.dot {
		position: absolute;
		top: -3rpx;
		right: 10rpx;
		background-color: #FA3534;
		width: 18rpx;
		height: 18rpx;
		border-radius: 9rpx;
	}

	.content {
		margin-top: calc(var(--status-bar-height) + 100rpx);
	}
</style>
